
<!doctype html>
<html>
	<head>
		<title>learningthree.js boiler plate for three.js</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- css // stylized my page ! -->
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
		<link rel="stylesheet"  href="css/colorpicker.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

        <script type="text/javascript" src="js/lib/threejs/Three.js"></script>	
		<script type="text/javascript" src="js/lib/threejs/ColladaLoader.js"></script>

		<script type="text/javascript" src="js/lib/utils/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/lib/utils/Detector.js"></script>
		<script type="text/javascript" src="js/lib/utils/Stats.js"></script>

	</head>
<body>
	<!-- three.js container -->
    	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
		<div class="top">
			<a href="/blog/2012/01/20/casting-shadows/" target="_blank">LearningThree.js</a>
			Demo for Casting Shadows
		</div>
		<div class="bottom" id="inlineDoc" >
			- <i>p</i> for screenshot
		</div> 
	</div> 

	<script type="text/javascript">
		var stats, scene, renderer;
		var camera, cameraControl;


		if( !init() )	animate();

		// init the scene
		function init(){

			if( Detector.webgl ){
				renderer = new THREE.WebGLRenderer({
					antialias		: true,	// to get smoother output
					preserveDrawingBuffer	: true	// to allow screenshot
				});
				renderer.shadowMapEnabled	= true;
				renderer.shadowMapSoft		= true;
				renderer.setClearColorHex( 0x000000, 1 );
			}else{
				Detector.addGetWebGLMessage();
				return true;
			}
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById('container').appendChild(renderer.domElement);

			// add Stats.js - https://github.com/mrdoob/stats.js
			stats = new Stats();
			stats.domElement.style.position	= 'absolute';
			stats.domElement.style.bottom	= '0px';
			document.body.appendChild( stats.domElement );

			// create a scene
			scene = new THREE.Scene();

			// put a camera in the scene
			camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000 );
			camera.position.set(0, 10, 14);
			camera.lookAt(new THREE.Vector3(0,0,0));
			scene.add(camera);

			// create a camera contol
			//cameraControls	= new THREEx.DragPanControls(camera)
			//cameraControls.target	= new THREE.Vector3(0, 2, 0);

			//// transparently support window resize
			//THREEx.WindowResize.bind(renderer, camera, 0.5);
			// allow 'p' to make screenshot
			//THREEx.Screenshot.bindKey(renderer);
			// allow 'f' to go fullscreen where this feature is supported
			//if( THREEx.FullScreen.available() ){
			//	THREEx.FullScreen.bindKey();		
			//	document.getElementById('inlineDoc').innerHTML	+= "- <i>f</i> for fullscreen";
			//}

			// here you add your objects
			// - you will most likely replace this part by your own

			// init the lights

			var ambient	= new THREE.AmbientLight( 0x444444 );
			scene.add( ambient );
			
			var light	= new THREE.DirectionalLight( 0x4444cc );
			light.position.set( 1, -1, 1 ).normalize();
			scene.add( light );

			var light	= new THREE.SpotLight( 0x8888FF, 2 );
			spot1	= light;
			light.target.position.set( 0, 2, 0 );
			light.shadowCameraNear		= 0.01;		
			light.castShadow		= true;
			light.shadowDarkness		= 0.5;
			//light.shadowCameraVisible	= true;
			//scene.add( light );

			var light	= new THREE.SpotLight( 0xFFAA88, 2 );
			spot2	= light;
			light.target.position.set( 0, 2, 0 );
			light.shadowCameraNear		= 0.01;		
			light.castShadow		= true;
			light.shadowDarkness		= 0.5;
			light.shadowCameraVisible	= true;
			scene.add( light );
			
			// create the sundial
			
			sundial	= new THREE.Object3D();
			sundial.position.y	= -1;
			scene.add(sundial);

			var geometry	= new THREE.TorusGeometry( 2, 1, 16, 32 );
			var geometry	= new THREE.TorusKnotGeometry(25, 8, 75, 20);
			//var geometry	= new THREE.OctahedronGeometry( 1, 1 );
			//var geometry	= new THREE.CubeGeometry( 3, 3, 3 );
			//var geometry	= new THREE.SphereGeometry( 3, 32,16 );
			//var geometry	= new THREE.CylinderGeometry(1, 1, 4, 16)
			//var texture	= THREE.ImageUtils.loadTexture( "images/water.jpg" );
			//texture.repeat.set( 0.7, 1 );
			//texture.wrapS	= texture.wrapT = THREE.RepeatWrapping;
			var material	= new THREE.MeshPhongMaterial({
				ambient		: 0x444444,
				color		: 0x8844AA,
				shininess	: 300, 
				specular	: 0x33AA33,
				shading		: THREE.SmoothShading,
			//	map		: texture
			});
			var mesh	= new THREE.Mesh( geometry, material );
			mesh.scale.multiplyScalar(1/18);
			mesh.castShadow		= true;
			mesh.receiveShadow	= true;
			mesh.position.y		= 4;
			sundial.add( mesh );
			mainObject	= mesh;
			
			
			var loader = new THREE.ColladaLoader();
			loader.options.convertUpAxis = true;
			loader.load( './dae/logo_3D_5.dae', function colladaReady( collada ) {
				var dae = collada.scene;
				dae.scale.x = dae.scale.y = dae.scale.z = 1;
				dae.updateMatrix();
				enableShading(dae);
				dae.castShadow		= true;
				dae.receiveShadow	= true;
				//dae.position.y = 200;
				sundial.add(dae);
			} );

			var geometry	= new THREE.CubeGeometry( 10, 0.5, 10);
			//var geometry	= new THREE.PlaneGeometry( 50, 5, 50 );
			var texture	= THREE.ImageUtils.loadTexture( "images/water.jpg" );
			//texture.repeat.set( 10, 10 );
			texture.repeat.set( 0.5, 0.8 );
			texture.wrapS	= texture.wrapT = THREE.RepeatWrapping;
			var material	= new THREE.MeshPhongMaterial({
				ambient		: 0x444444,
				color		: 0x66aa66,
				shininess	: 150, 
				specular	: 0x888888,
				shading		: THREE.SmoothShading,
				//map		: texture
			});
			var mesh		= new THREE.Mesh( geometry, material );
			mesh.scale.multiplyScalar(3);
			mesh.flipSided		= false;
			mesh.castShadow		= false;
			mesh.receiveShadow	= true;
			mesh.position.y		= -0.5/2;
			sundial.add( mesh );
		}
		// animation loop
		function animate() {

			// loop on request animation loop
			// - it has to be at the begining of the function
			// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
			requestAnimationFrame( animate );

			// do the render
			render();

			// update stats
			stats.update();
		}
		
		function enableShading (d) {
			if(d.material!=undefined){
				//d.material.shininess=300;
				//d.material.ambient=0x444444;
				//d.material.color=0x66aa66;
				//d.material.shininess=150;
				//d.material.specular	= 0x888888;
				//d.material.shading=THREE.SmoothShading;
			}
			if(d.materials!=undefined){
				for(var i=0; i<materials.length; i++){
					//materials[i].shading = THREE.SmoothShading;
					//materials[i].shininess=300;
					//materials[i].ambient=0x444444;
					//materials[i].color=0x66aa66;
					//materials[i].specular	= 0x888888;
				}
			}
			if(d.children != undefined){
				for(var i=0; i < d.children.length; i++){
					d.children[i].castShadow = true;
					d.children[i].receiveShadow	= true;
					enableShading(d.children[i]);
				}
			}
		}

		

		// render the scene
		function render() {
			
			var seconds		= Date.now()/1000
			var piPerSeconds	= seconds * Math.PI;
			
			spot1.position.x	= Math.cos(piPerSeconds*0.05)*12;
			spot1.position.y	= 10;
			spot1.position.z	= Math.sin(piPerSeconds*0.05)*12;

			spot2.position.x	= Math.cos(piPerSeconds*-0.1)*15;
			spot2.position.y	= 8 + Math.sin(piPerSeconds*0.5)*4;
			spot2.position.z	= Math.sin(piPerSeconds*-0.1)*15;
			
			mainObject.rotation.x	+= 0.005;
			mainObject.rotation.y	+= 0.03;
			mainObject.rotation.z	+= 0.02;
			
			// update camera controls
			//cameraControls.update();
			// limit camera position to avoid showing shadow on backface
			camera.position.y	= Math.max(camera.position.y, 3);

			// actually render the scene
			renderer.render( scene, camera );
		}
	</script>
</body>
</html>
